<template>
<!--  表单选项管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input placeholder="请输入名称" v-model="form.name">
        <template slot="prepend">名称</template>
      </el-input>
      <el-input placeholder="请输入描述" v-model="form.explanation">
        <template slot="prepend">描述</template>
      </el-input>
      <el-select v-model="form.level" placeholder="选择等级" clearable>
        <el-option
          v-for="item in EnumContentLevelList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.mathType" placeholder="选择计分方式" clearable>
        <el-option
          v-for="item in EnumMathTypeList"
          :key="item.code"
          :label="item.name"
          :disabled="item.disabled"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">添加模板</el-button>
      <!-- table -->
      <div class="common_btnBox" >
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          min-width="160"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="explanation"
          min-width="180"
          label="描述">
        </el-table-column>
        <el-table-column
          prop="levelName"
          width="100"
          label="等级">
        </el-table-column>
        <el-table-column
          prop="mathTypeName"
          width="100"
          label="计分方式">
        </el-table-column>
        <el-table-column
          prop="flagName"
          width="120"
          label="子项是否可选">
        </el-table-column>
        <el-table-column
          prop="repeatFlagName"
          width="120"
          label="数据复用">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="180"
          label="更新时间">
          <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <button class="btn_edit" @click="handleCopy(scope.row)">复制</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="clearValidate"
      width="1000px">

      <div style="padding-left: 20px;margin-bottom: 20px">
        <el-radio-group v-model="limit">
          <el-radio-button border v-for="item in limitList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="120px"
               label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="currentRow.name" placeholder="输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="explanation">
              <el-input v-model.trim="currentRow.explanation" placeholder="输入描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="等级" prop="level">
              <el-select v-model="currentRow.level" placeholder="选择等级" @change="changeLevel">
                <el-option
                  v-for="item in EnumContentLevelList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计分方式" prop="mathType">
              <el-select v-model="currentRow.mathType" placeholder="选择计分方式" @change="changeMathType">
                <el-option
                  v-for="item in EnumMathTypeList"
                  :key="item.code"
                  :label="item.name"
                  :disabled="item.disabled"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="权重值" prop="weight">
              <el-input v-model.trim="currentRow.weight" placeholder="输入权重值"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row  v-if="currentRow.mathType === 2">
          <el-col :span="12">
            <el-form-item label="代数名称" prop="algebra">
              <el-input v-model.trim="currentRow.algebra" placeholder="输入代数名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代数单位" prop="unit">
              <el-input v-model.trim="currentRow.unit" placeholder="输入代数单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="子项是否可选">
              <el-radio-group v-model="currentRow.flag">
                <el-radio border v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否复用数据">
              <el-radio-group v-model="currentRow.repeatFlag">
                <el-radio border v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包含其他">
              <el-radio-group v-model="currentRow.hasOther">
                <el-radio border v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>


        <div style="margin-left: 13px">
          <el-button size="mini" type="primary" @click="handleAddChildren"
                     v-if="currentRow.level===1" icon="el-icon-circle-plus-outline">添加评分项
          </el-button>
        </div>
        <div class="add-tab" v-if="currentRow.level===1">
          <el-table border :data="currentRow.itemList" class="m-t-24">
            <el-table-column label="编号">
              <template slot-scope="scope">
                <el-form-item :prop="`itemList.${scope.$index}.code`">
                  <el-input v-model="scope.row.code" disabled :maxlength="20"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <el-form-item :prop="`itemList.${scope.$index}.name`">
                  <el-input v-model="scope.row.name" placeholder=""
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="最小值" v-if="currentRow.mathType === 2">
              <template slot-scope="scope">
                <el-form-item :prop="`itemList.${scope.$index}.min`">
                  <el-input v-model="scope.row.min" type="number"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="最大值" v-if="currentRow.mathType === 2">
              <template slot-scope="scope">
                <el-form-item :prop="`itemList.${scope.$index}.max`">
                  <el-input v-model="scope.row.max" type="number"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="分数">
              <template slot-scope="scope">
                <el-form-item :prop="`itemList.${scope.$index}.score`">
                  <el-input v-model="scope.row.score" type="number"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDeleteChildren(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="currentRow.level && currentRow.level!==1">

          <div v-if="currentRow.mathType === 6">
            <el-form-item label="选择评分项" prop="itemList">
              <el-select multiple v-model="currentRow.itemList[0].idList" filterable placeholder="可多选">
                <el-option
                  v-for="item in itemList"
                  :key="item.id"
                  :label="item.name + '('+item.explanation+')'"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div v-else>
            <el-form-item label="选择评分项" prop="itemList">
              <el-select value-key="id" multiple v-model="currentRow.itemList" filterable placeholder="可多选">
                <el-option
                  v-for="item in itemList"
                  :key="item.id"
                  :label="item.name + '('+item.explanation+')'"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" :disabled="submitStatus"
                   @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {querySelectListByLevel, saveOrUpdate, queryList} from '@/services/model/form'

import Format from '@/utils/format'
import {filterEmpty} from '@/services/request'
import Enums from '@/utils/enums'

export default {
  mixins:[Enums],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      limitList:[
        {code:0,name:'不限制子项等级'},
        {code:1,name:'限制子项等级'},
      ],
      rules: {
        name: {required: true, message: '请输入名称'},
        level: {required: true, message: '请选择等级'},
        mathType: {required: true, message: '请选择计分方式'},
      },
      selectModel: 0, // 下拉选择model
      searchModel: '', // 搜索框model
      tableList: [],

      isShowDialog: false, // 是否显示弹窗
      submitStatus: false,
      currentRow: {
        itemList: []
      }, // 新增数据
      cityModel: '',
      itemList: [],
      limit:0,
      checked: true,
      EnumContentLevelList: [],
      EnumMathTypeList: [],
      EnumSysBooleanList: [],
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑评价内容' : '新增评价内容'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    },
    // 0正常，1锁定
    getStatusBtnMap(type) {
      return type ? '停用' : '启用'
    }
  },
  methods: {
    changeLevel() {
      // this.EnumMathTypeList.map(x => {
      //   x.disabled = false
      //   if (this.currentRow.level === 1) {
      //     if (x.code !== 1 && x.code !== 2 && x.code !== 7 && x.code !== 8) {
      //       x.disabled = true
      //     }
      //   } else {
      //     if (x.code === 1 || x.code === 2 || x.code === 7 || x.code === 8) {
      //       x.disabled = true
      //     }
      //   }
      // })
      // if (this.currentRow.level === 1) {
      //   this.currentRow.mathType = 1
      // } else {
      //   this.currentRow.mathType = 0
      // }
      this.itemList = []
      this.querySelectListByLevel()
    },
    changeMathType(event) {
      this.$forceUpdate()
      this.currentRow.itemList = []
      if (event === 6) {
        this.currentRow.itemList = [{idList: []}]
      }

    },
    // 删除设计资料-防护信息
    handleDeleteChildren(index) {
      this.currentRow.itemList.splice(index, 1)
    },
    // 添加设计资料-防护信息
    handleAddChildren() {
      if (!this.currentRow.level || !this.currentRow.mathType) {
        this.$notify({
          type: 'error',
          title: '提示',
          message: this.currentRow.level ? '请先选择等级' : '请先选择计分方式'
        })
        return
      }
      let item = {
        code: this.currentRow.itemList.length + 1,
        name: "",
        score: "",
      }
      this.currentRow.itemList.push(item)
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 关闭弹窗之前清楚表单校验提示
    clearValidate() {
      this.$refs.form.clearValidate()
      this.isShowDialog = false
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentRow = filterEmpty(this.currentRow)
          this.submitData()
        }
      })
    },
    // 新增编辑提交数据
    async submitData() {
      this.submitStatus = true
      // 根据ID判断使用新增还是编辑
      let res = await saveOrUpdate(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.isShowDialog = false
        this.submitStatus = false
        this.queryList()
      }
      return res
    },
    // 新增数据
    handleAdd() {
      this.currentRow = {
        itemList: [],
        flag: 0,
        repeatFlag: 0,
        hasOther: 0,
      }
      this.submitStatus = false
      this.isShowDialog = true
      this.limit = 1
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    handleCopy(row) {
      this.currentRow = {...row, id: ''}
      this.isShowDialog = true
      this.submitStatus = false
      this.limit = 0
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      //一级且为单选或区间的展示表格添加
      if (this.currentRow.level !== 1) {
        this.querySelectListByLevel()
      }
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = {...row}
      this.isShowDialog = true
      this.submitStatus = false
      this.limit = 0
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      //一级且为单选或区间的展示表格添加
      if (this.currentRow.level !== 1) {
        this.querySelectListByLevel()
      }
    },
    async querySelectListByLevel() {
      let form = {}
      if(this.limit === 1){
        form = {level: this.currentRow.level - 1}
      }
      let res = await querySelectListByLevel(form)
      this.itemList = res.data || []
    },
    async queryList() {
      let res = await queryList(this.form)
      if (res.code === 200) {
        this.tableList = res.data?.records || []
        this.form.size = Number(res.data?.size)
        this.form.total = Number(res.data?.total)


      }
    }
  },
  mounted() {
    this.queryDictList(['EnumContentLevel','EnumMathType','EnumSysBoolean'],
      ['EnumContentLevelList', 'EnumMathTypeList', 'EnumSysBooleanList'])
  },
  activated() {
    this.queryList()
    // 获取当前用户的角色列表
  }
}
</script>
<style lang="less">

  .add-tab {
    margin-left: 10px;

    .el-form-item__content {
      margin-left: 0px !important;
    }

    .el-table .cell {
      line-height: 13px !important;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .el-button--text {
      color: red;
    }

    .el-table td, .el-table th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button {
      padding-right: 10px;
    }
  }


  .user_status {
    &::before {
      content: '';
      margin-right: 6px;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #969997;
    }

    &.active::before {
      background-color: #0DC26B;
    }
  }

  /deep/ .relate_checkbox {
    .el-checkbox {
      margin-bottom: 30px;

      .el-checkbox__label {
        width: 100px;
      }
    }
  }

  /deep/ .dialog_area {
    .el-dialog__header {
      padding-bottom: 0;
    }
  }

  .item_tag {
    margin-left: 6px;

    &:first-child {
      margin-left: 0;
    }
  }

</style>
